<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tracked Controls</title>
    <meta name="description" content="Tracked Controls – A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <script src="components/aabb-collider.js"></script>
    <script src="components/grab.js"></script>
    <script src="components/ground.js"></script>
    <script src="shaders/skyGradient.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@4.0.1/dist/aframe-event-set-component.min.js"></script>
  </head>
  <body>
    <a-scene
      renderer="colorManagement: true;"
      cursor="rayOrigin: mouse"
      raycaster="objects: [cube]" fog="color: #bc483e; near: 0; far: 65;">
      <a-assets>
        <a-mixin id="cube"
                 event-set__grab="material.color: #FFEF4F"
                 event-set__grabend="material.color: #F2E646"
                 event-set__hit="material.color: #F2E646"
                 event-set__hitend="material.color: #EF2D5E"
                 event-set__mousedown="material.color: #FFEF4F"
                 event-set__mouseenter="material.color: #F2E646"
                 event-set__mouseleave="material.color: #EF2D5E"
                 event-set__mouseup="material.color: #F2E646"
                 geometry="primitive: box; height: 0.30; width: 0.30; depth: 0.30"
                 material="color: #EF2D5E;"></a-mixin>
        <a-assets>
           <a-asset-item id="ground" src="https://cdn.aframe.io/examples/tracked-controls/ground.glb"></a-asset-item>
        </a-assets>
      </a-assets>

      <!-- A-Frame cubes -->
      <a-entity position="0 0 -0.5">
        <a-entity class="cube" mixin="cube" position="0.30 1.65 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="0 1.95 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="-0.30 1.65 0"></a-entity>

        <a-entity class="cube" mixin="cube" position="0.60 1.35 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="0.60 1.05 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="0.60 0.75 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="0.60 0.45 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="0.60 0.15 0"></a-entity>

        <a-entity class="cube" mixin="cube" position="0.30 0.75 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="0 0.75 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="-0.30 0.75 0"></a-entity>

        <a-entity class="cube" mixin="cube" position="-0.60 1.35 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="-0.60 1.05 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="-0.60 0.75 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="-0.60 0.45 0"></a-entity>
        <a-entity class="cube" mixin="cube" position="-0.60 0.15 0"></a-entity>

        <!-- Environment -->
        <a-entity id="sky"
                  geometry="primitive: sphere; radius: 65;"
                  material="shader: skyGradient; colorTop: #353449; colorBottom: #BC483E; side: back"></a-entity>
         <a-entity ground></a-entity>
         <a-entity light="type: point; color: #f4f4f4; intensity: 0.1; distance: 0" position="-2.5 1.2 2.2"></a-entity>
         <a-entity light="type: point; color: #f4f4f4; intensity: 0.1; distance: 0" position="-20 -7 -40"></a-entity>
         <a-entity light="type: ambient; color: #f4f4f4; intensity: 0.25;" position="-8 10 -18"></a-entity>
      </a-entity>
      <!-- Hands -->
      <a-entity hand-controls="hand: left; handModelStyle: lowPoly; color: #ffcccc" aabb-collider="objects: .cube;" grab></a-entity>
      <a-entity hand-controls="hand: right; handModelStyle: lowPoly; color: #ffcccc" aabb-collider="objects: .cube;" grab></a-entity>
      <a-entity position="0 1.6 2" camera look-controls wasd-controls></a-entity>
    </a-scene>
  </body>
</html>
